<route lang="json5" type="page">
  {
    layout: 'default',
    style: {
      navigationBarTitleText: '示例',
    },
  }
</route>

<template>
  <view class="page">
    <sar-card title="卡片标题">
      <template #extra>
        <sar-tag plain theme="success">已完成</sar-tag>
      </template>
      <view>
        Trumpet, suona, small song, large cavity. The official ships are in chaos,
        all because of your bid. The army listened to the army, and the people
        listened to the people. Where to tell what is true and what is false? The
        sight blows over this house, blows the other one, only blows the water all
        the geese fly!
      </view>
      <template #footer>
        <gi-space>
          <sar-button size="mini">审批</sar-button>
          <sar-button size="mini">编辑</sar-button>
        </gi-space>
      </template>
    </sar-card>

    <gi-gap></gi-gap>

    <sar-card title="卡片标题">
      <template #extra>
        <sar-tag theme="danger">审核中</sar-tag>
      </template>
      <view>
        Trumpet, suona, small song, large cavity. The official ships are in chaos,
        all because of your bid. The army listened to the army, and the people
        listened to the people. Where to tell what is true and what is false? The
        sight blows over this house, blows the other one, only blows the water all
        the geese fly!
      </view>
      <template #footer>
        <gi-space justify="end">
          <sar-button size="mini" :root-style="{ width: '80px', flexGrow: 0 }">审批</sar-button>
          <sar-button size="mini" :root-style="{ width: '80px', flexGrow: 0 }">编辑</sar-button>
        </gi-space>
      </template>
    </sar-card>

    <gi-gap></gi-gap>

    <sar-card title="卡片标题">
      <gi-space>
        <sar-tag v-for="(i, n) in 20" :key="i" theme="primary">标签{{ n }}</sar-tag>
      </gi-space>
    </sar-card>
  </view>
</template>

<script lang='ts' setup>

</script>

<style lang='scss' scoped>
.page {
  padding: $padding;
}
</style>
